<template>
  <div class="common-body">
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >{{ $store.getters.getBreadcrumb("level1").name }}
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/invoice/Entering/toSubmit' }"
          >发票管理
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-if="$route.query.type === 'approval'"
          :to="{
            path: '/invoice/invoiceApproval/pending-list'
          }"
          >发票审批
        </el-breadcrumb-item>
        <el-breadcrumb-item
          v-else
          :to="{
            path: '/invoice/manage'
          }"
          >发票冲销
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span>查看</span>
          <span style="margin-left: 10px; color: #4a4a4a">{{
            this.$route.query.invoiceName
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div :class="commonStyle" v-show="isTrue">
      <div
        class="detail-info"
        :style="{
          width: approvingBool == false ? '100%' : 'calc(100% - 398px)'
        }"
      >
        <div class="detail-info-el-Label">
          <el-label :type="approving" v-if="approvingStatus"></el-label>
        </div>
        <div class="detail-info-form-container self-container">
          <el-tabs v-model="activeName" class="el-tabs__customize">
            <el-tab-pane label="基本信息" name="first">
              <detailBaseInfo
                labelWidth="130px"
                :formList="baseFormList"
                :detail="detailList"
              />
            </el-tab-pane>
              <el-tab-pane label="款项明细" name="fundDetail">
            <fund-detail />
          </el-tab-pane>
            <el-tab-pane label="发票清单" name="second">
              <el-group-title class="ccui-group-wrapper d_jump">
                <template slot="groupTitle">
                  <div class="ccui-multifunctional-table-wrapper">
                    <invoiceList ref="tableBill" :tableBill="tableBill" />
                  </div>
                </template>
              </el-group-title>
            </el-tab-pane>
            <el-tab-pane label="发票信息" name="three">
              <el-group-title class="ccui-group-wrapper d_jump">
                <template slot="groupTitle">
                  <div class="ccui-multifunctional-table-wrapper">
                    <invoiceInfo ref="tableInfo" :tableInfo="tableInfo" />
                  </div>
                </template>
              </el-group-title>
            </el-tab-pane>
            <el-tab-pane label="附件" name="four" style="marign-bottom: 10px">
              <contractAnnex
                v-if="isTrue"
                ref="attachment"
                isTab
                v-model="fileList"
                state="detail"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!--右边审批状态-->
      <approval-read-record
        v-if="approvingBool && isTrue"
        :approvalRecordData="approvalRecordData"
      ></approval-read-record>
    </div>

    <!--  底部导航栏及签名导出  -->
    <bottomGuide
      v-if="isTrue"
      busiType="109"
      :approvalStatus="
        ['5','22'].includes($route.query.enterApproveStatus) ? 'approvaled' : ''
      "
      exportMethod="get"
      methodGetPageType="exportInvoiceWriteOffDetail"
      :curPageId="$route.query.id"
      :businessCode="businessCode"
      @handleBack="handleBack"
    />
  </div>
</template>

<script>
import fundDetail from "../components/fundDetail";


import invoiceList from "../components/invoiceList";
import invoiceInfo from "../components/invoiceInfo";
import { getInvoiceWriteOffById } from "../api";
import { formatNumber } from "@/basa/utils";
import publicComponent from "@/basa/components/public";

export default {
  data() {
    return {
      businessCode: "",
      downloadUrl: this.$addUrlPerFix(process.env.VUE_APP_BASE_URL),
      activeName: "first",
      baseFormList: [
        {
          label: "冲销原因",
          titleContent: "writeOffReason",
          span: 18,
          title: true
        },
        { label: "填报单位", titleContent: "reportInOrgName" },
        { label: "冲销单编号", titleContent: "writeOffCode" },
        { label: "冲销单名称", titleContent: "writeOffName" },
        { label: "供应商", titleContent: "partyBName" },
        { label: "发票单编号", titleContent: "invoiceCode" },
        { label: "结算单编号", titleContent: "settlementCode" },
        { label: "结算单名称", titleContent: "settlementName" },
        { label: "分类名称", titleContent: "categoryName" },
        { label: "币种", titleContent: "currency" },
        { label: "结算金额", titleContent: "settlementAmount" },
        { label: "本次冲销金额", titleContent: "writeOffAmount" },
        { label: "已收票金额", titleContent: "totalInvoiceAmount" },
        { label: "发票张数", titleContent: "invoiceNum" },
        { label: "编制人", titleContent: "compileUser" },
        { label: "编制日期", titleContent: "compileDate", span: 18 },
        { label: "备注", titleContent: "remark", title: true, span: 18 }
      ],
      detailList: {},
      fileList: [],
      tableInfo: [],
      tableBill: [],
      approvalRecordData: [],
      approvingStatus: true, // 审批状态展示
      approvingType: {
        1: "approving", // 审批中
        2: "withdrawn", // 已撤回
        3: "approvaled", // 审批通过
        4: "sendback", // 审批退回
        5: "unapproval" // 审批不通过
      },
      approving: "", // 审批状态
      isTrue: false,
      approvingBool: true,
      commonStyle: ""
    };
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
      this.isTrue = false;
    },
    getList() {
      getInvoiceWriteOffById({ id: this.$route.query.id }).then(res => {
        console.log(res.data.data);
        this.fileList = res.data.data.files;
        this.businessCode = res.data.data.invoiceWriteOffBO.writeOffCode;
        this.tableInfo = res.data.data.invoiceEnterBO.invoceInfo;
        this.tableBill = res.data.data.invoiceEnterBO.invoceBill;
        this.detailList = res.data.data.invoiceEnterBO.invoceBasic;
        this.detailList.writeOffReason =
          res.data.data.invoiceWriteOffBO.writeOffReason; //冲销原因
        this.detailList.writeOffCode =
          res.data.data.invoiceWriteOffBO.writeOffCode; //冲销单编号
        this.detailList.writeOffName =
          res.data.data.invoiceWriteOffBO.writeOffName; //冲销单名称
        this.detailList.writeOffAmount =
          res.data.data.invoiceWriteOffBO.writeOffAmount; //本次冲销金额

        this.detailList.settlementAmount = Number(
          this.detailList.settlementAmount
        ).toFixed(2);
        this.detailList.totalInvoiceAmount = Number(
          this.detailList.totalInvoiceAmount
        ).toFixed(2);
        this.detailList.writeOffAmount = Number(
          this.detailList.writeOffAmount
        ).toFixed(2);
        this.detailList.invoiceNum = formatNumber(
          this.detailList.invoiceNum,
          0
        );
        this.detailList.compileDate = this.detailList.compileDate
          ? this.detailList.compileDate.substring(0, 10)
          : "";
        let resultCommon =
          res.data.data.invoiceWriteOffBO.writeOffApproveStatus === "0";
        this.commonStyle = resultCommon
          ? "detail-box ccui-clearfix commonStyle"
          : "detail-box ccui-clearfix";
        this.approvingBool = resultCommon ? false : true;
        this.approvalRecordData = res.data.data.approveRecords; // 审批记录

        this.approvalRecordData.forEach(item => {
          if (item.operState === 0) {
            item.icon = "el-icon-time";
            item.color = "#F5A623";
          }
        });
        this.isTrue = true;
        this.approving =
          this.approvingType[
            res.data.data.invoiceWriteOffBO.writeOffApproveStatus
          ];
        this.approvingStatus = false;
        this.$nextTick(() => {
          this.approvingStatus = true;
        });
      });
    }
  },
  mounted() {
    this.getList();
  },
  activated() {
    this.activeName = "first";
    this.getList();
    this.myId = this.$route.query.id;
    console.log("this.myId", this.myId);
  },
  beforeRouteLeave(to, from, next) {
    this.isTrue = false;
    next();
  },
  components: {
    fundDetail,
    invoiceList,
    invoiceInfo,
    detailBaseInfo: publicComponent.detailBaseInfo,
    approvalReadRecord: publicComponent.approvalRecord,
    contractAnnex: publicComponent.uploadInfo,
    bottomGuide: publicComponent.bottomGuide
  }
};
</script>

<style lang="scss" scoped>
.approval-read-record {
  margin-top: 0px;
}
.commonStyle {
  background: #ffffff;
}
.ccui-app-container-detail {
  background: none;
}
/deep/ .ccui-multifunctional-table-wrapper .el-table__header-wrapper th {
  border-right: 1px solid #edf2fc;
}
/deep/ .ccui-multifunctional-table-wrapper .el-table td {
  border-right: 1px solid #edf2fc;
}
/deep/ .el-table__row td .el-tooltip {
  width: 100% !important;
}
</style>
